<div id="treedemo">
    <el-row :gutter="10">
        <el-col :span="5">
            <el-tree ref="mytree" :style="styleObj" highlight-current :data="mytree.data" @node-click="nodeClickFn"></el-tree>
        </el-col>
        <el-col :span="19">
            <div class="yu-search">
                <el-form ref="queryForm" :inline="true">
                    <el-form-item>
                        <el-input @keyup.enter.native="queryMainGridFn" v-model="mainGrid.query.title" :placeholder="$t('treedemo.bt')" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker type="date" format="yyyy-MM-dd" v-model="mainGrid.query.create_at" :placeholder="$t('treedemo.sj')"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="search" @click="queryMainGridFn">{{ $t('treedemo.ss') }}</el-button>
                        <el-button type="danger" icon="edit">{{ $t('treedemo.bc') }}</el-button>
                        <el-button icon="information" @click="resetQueryCondFn">{{ $t('treedemo.zz') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table ref="mytable" :data="mainGrid.data" v-loading="mainGrid.loading" @selection-change="selectionChangeFn"
                     :max-height="height" stripe border fit highlight-current-row element-loading-:text="$t('treedemo.jzz')">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" :label="$t('treedemo.xh')" width="65"></el-table-column>
                <el-table-column prop="id" label="ID" width="75"></el-table-column>
                <el-table-column prop="title" :label="$t('treedemo.bt')" width="260"></el-table-column>
                <el-table-column prop="create_at" :label="$t('treedemo.sj')" width="110"></el-table-column>
                <el-table-column prop="author" :label="$t('treedemo.zz')" width="90"></el-table-column>
                <el-table-column prop="pageviews" :label="$t('treedemo.yds')" ></el-table-column>
            </el-table>
            <div v-show="!mainGrid.loading" class="pagination-container">
                <el-pagination :total="mainGrid.total" :current-page.sync="mainGrid.paging.start" :page-size="mainGrid.paging.limit"
                               @size-change="limitChangeFn" @current-change="startChangeFn" layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</div>
